package com.csw.compose.ui.components

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.RowScope
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.twotone.ArrowBack
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.twotone.Menu
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.csw.compose.ex.clickThrottle

@Preview
@Composable
fun TopTitlePreView() {
    Column {
        CenterTitleWithMenu("标题") {}
        PreviewSpacer()
        LeftTitleWithBack("标题") {}
        PreviewSpacer()
        LeftTitleWithBack("标题", {
            Icon(Icons.Filled.Add, "添加", modifier = Modifier.clickable {})
        }) {}
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CenterTitleWithMenu(title: String, onClickMenu: () -> Unit) {
    CenterAlignedTopAppBar(
        title = { Text(title) },
        navigationIcon = {
            Icon(Icons.TwoTone.Menu, "打开Drawer", modifier = Modifier.clickThrottle {
                onClickMenu()
            })
        }
    )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LeftTitleWithBack(
    title: String,
    actions: @Composable RowScope.() -> Unit = {},
    onClickBack: () -> Unit
) {
    TopAppBar(
        title = { Text(title) },
        navigationIcon = {
            Icon(Icons.AutoMirrored.TwoTone.ArrowBack, "返回", modifier = Modifier.clickThrottle {
                onClickBack()
            })
        },
        actions = actions
    )
}
